import React, { useState } from 'react'
import imgTitle from '@/assets/images/xyf/title.png'
import '@/assets/scss/xyf/home.scss'
import data from '@/data/data.json'
import { Link } from 'react-router-dom'
import { Row, Col, Menu} from 'antd'
import Content from '../Content'

const { SubMenu } = Menu; 

export default function Home(props) {
    const baseUrl = props.match.url
    const [currentIndex, setCurrentIndex] = useState('data-1')
    const [openKeys, setOpenKeys] = useState([]);
    const [titleKey, setTitleKey] = useState('首页')
    const [arrInit, setArrInit] = useState(['data-5-1-2'])

    const handleSelect = (key) => {
        setCurrentIndex(key)
        setOpenKeys([key])
        if(key === 'data-1') {
            setTitleKey('首页')
            // setArrInit(['data-5-1-2'])
            setArrInit(['data-1'])
        }
    }
    //顶部导航栏的渲染
    const topNav = data.data.map((item, index) => {
        return (
            <ul key={index} className="top-nav-ul">
                <li key={item.oneKey} className={["top-nav-li ", currentIndex === item.oneKey ?'active' : ''].join('')}
                    onClick={() => handleSelect(item.oneKey)}>
                    <Link to={baseUrl + item.url}>{item.oneTitle}</Link>
                </li>
            </ul>
        )
    })  

    //侧边栏
    const slideData = []
    const rootSubmenuKeys = []   //一级submenu key值
    let allSlide = data.data
    for(let i = 1; i < allSlide.length; i++) {
        slideData.push(allSlide[i])
        rootSubmenuKeys.push(allSlide[i].oneKey)
    }
    
    const onOpenChange = keys => {
        const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
          setOpenKeys(keys);
        } else {
          setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    }
    const onClickHandle = (e) => {
        let keys = e.item.props.children[1].props.children
        setTitleKey(keys)
    }
    const handleTitleClick = (e) => {
        setCurrentIndex(e.key)
    }
    
    const slideNav = slideData.map((item, index) => {  //一级循环
        return (  
                 <SubMenu key={item.oneKey} 
                          onTitleClick={handleTitleClick}
                          className="bgColor oneHover fontWe oneHeight"
                          icon={<img src={item.urlImg} alt=""></img>}  
                          title={item.oneTitle}>
                     {
                         item.oneList.map((item1, index1) =>     //二级循环
                            //使用三目运算符来渲染是否存在三级导航栏  
                            item1.twoList ? 
                            //如果有三级导航栏
                            (
                                <SubMenu title={item1.twoTitle} key={item1.twoKey}
                                         className="bgColor">
                                {
                                    item1.twoList.map((item2, index2) =>{  //三级嵌套
                                       return (
                                        <Menu.Item key={item2.threeKey} className="bgColor threeLine">
                                            <Link to={baseUrl + item2.threeUrl}>{item2.threeTitle}</Link>  
                                        </Menu.Item>
                                       )
                                        }
                                    )
                                }
                            </SubMenu>
                            ) : 
                            // 没有twoList，即没有三级导航栏
                            (   
                                <Menu.Item key={item1.twoKey} className="bgColor twoList">
                                    <Link to={ baseUrl + item1.twoUrl}>{item1.twoTitle}</Link>
                                </Menu.Item>
                            )
                         )
                     }
                        
                    </SubMenu>
        )
    })
    
    return (
        <div className="home">
           {arrInit[0]}
            {/* 顶部导航栏 */}
            <Row className="topNav">
                <Col span={6}>
                    <img src={imgTitle} alt="" />
                </Col>
                <Col span={18} className="top-nav-content">{topNav}</Col>
            </Row>
            {/* 侧边导航栏以及内容 */}
            <Row className="subNav">
                <Col span={4}>
                    <Menu
                        className="slide-nav"
                        theme="white"
                        onOpenChange={onOpenChange}
                        onClick={onClickHandle}
                        defaultSelectedKeys={arrInit}
                        mode="inline"
                        openKeys={openKeys}
                    >
                    {slideNav}
                    </Menu>
                </Col>
                {/* 内容区域 */}
                <Col span={20}>
                    <div className='xyf-content-title'>
                        <div className="title-txt">
                            <span>{titleKey}</span>
                        </div>
                    </div>
                    <Content data={props}></Content>
                </Col>
            </Row>
        </div>
    )
}